<template>
  <div ref="right">
      <div class="title">
         <div class="header">个人主页</div>
          <div class="img-wrapper">
                <img class="img"  :src="imgurl"/>
            </div>
          <div class="name">{{this.list.vName}}的主页</div>
      </div>
      <div> 
          <div class="item">
              <div class="item-title border-bottom">头像:</div>
              <div class="item-desc">
                  <img class="item-img":src="imgurl"/>
                  <!-- <span class="iconfont"> &#xe616;</span> -->
              </div>
          </div>
          <div class="item">
              <div class="item-title">用户名:</div>
              <div class="item-desc">
                  {{list.vName}}
                  <span class="iconfont"> &#xe616;</span>
              </div>
          </div>
          <div class="item">
              <div class="item-title">用户ID:</div>
              <div class="item-desc">
                  {{list.vId}}
                  <span class="iconfont">&#xe616;</span>
              </div>
          </div>
          <div class="item">
              <div class="item-title">投票状态:</div>
              <div class="item-desc">
                  {{appear = list.vStatus === '0' ? '不可投票/评分' : '可以投票/评分'}}
                  <span class="iconfont"> &#xe616;</span>
              </div>
          </div>
          <div class="item  border-bottom">
              <div class="item-title">人脸识别状态:</div>
              <div class="item-desc">
                  {{condition}}
                  <span class="iconfont"> &#xe616;</span>
              </div>
          </div>
     </div>
  </div> 
</template>

<script>
import { mapState } from 'Vuex'
import axios from 'axios'
export default {
  name: 'introduction',
  data () {
    return {
      list: {},
      imgurl: 'static/img/face.jpg',
      condition:'该功能暂时不可用'
    }
  },
  computed: {
    ...mapState(['voteId'])
  },
  methods: {
    getintroductionInfo () {
      axios.post('http://192.168.43.188:8081/getMyInfo', {'id': this.voteId}).then(({data}) => {
        if (data.msg === '111') { this.list = data.info } else { swal(data.msg, '', 'error')}
      }).catch(error => swal('Info' + error, '', 'error'))
    },
    handleScroll (e) {
      // console.log(this.$refs.right.offsetLeft)
      // alert('111')
      // console.log(window.screen.width)
      // console.log(e.touches)
    }
  },
  mounted () {
    this.getintroductionInfo ()
    // window.addEventListener('touchmove', this.handleScroll)
  },
  // beforeDestory () {
  //   window.removeEventListener('touchmove', this.handleScroll)
  // }
}
</script>

<style lang="stylus" scoped>
.title
  margin-bottom: .4rem
  padding-bottom: .9rem
  background: #eee
  .header
      height: 1rem
      line-height: 1rem
      font-size: .4rem
      background: #000
      text-align: center
      color: #fff
  .img-wrapper
      text-align: center
      padding: .8rem 0  .3rem 0
      .img
          width: 15%
          height: 15%
          border-radius: 50%
  .name
      text-align: center
      line-height: .6rem
      font-size: .6rem
      font-family: STxingkai
      font-weight: 500
      padding-bottom: .2rem
.item
    line-height: 1.7rem
    padding: 0.1rem 1rem .1rem 1.2rem
    font-size: .4rem
    font-family: STkaiti
    margin: .01rem
    border-bottom: .02rem solid #999
    .item-title
        display: inline
    .item-img
        float: right
        height: 1.55rem
        // width: 35%
    .item-desc
        float: right
        text-align: right
</style>
